<template>
	<view class="p-x-10 p-t-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item :name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">110KV变电站视频监控</text></view>
				</template>

				<my-play-video-list
					:list="['8998bcc870bc4414bf4e6e9993e5b5c6', 'cfe5c7d2f9ee460c98444ce69244fa44', '1362739c8f904d96962ee4963f25dcb3', '4d99f737479d49518c4621bd3297a2d1']"
					@DataQuery="() => collapse.init()"
				/>
			</u-collapse-item>

			<u-collapse-item :name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">有功功率</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="area" ontouch :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>

			<u-collapse-item :name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">动环信息</text></view>
				</template>
				<my-grid :list="list2" decimals="1" :col="2" />
			</u-collapse-item>

			<u-collapse-item :name="4">
				<template #title>
					<view class="content-item-title"><text class="title-txt">设备运行数据监测</text></view>
				</template>
				<uni-data-select v-model="selectVal" :localdata="list" />
				<my-grid :list="list1" decimals="1" :col="3" class="m-t-10" />
			</u-collapse-item>
		</u-collapse>

		<up-back-top :scroll-top="scrollTop" />
	</view>
</template>

<script setup>
import { getApiFabric, getByApiCode } from '@/api/customApi';
/************************返回顶部*********************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

const collapse = ref(null),
	showMoreKeys = ref([1, 2, 3, 4]),
	list = ref([]),
	selectVal = ref(''),
	list1 = ref([
		{
			key: '线电压_Ua',
			title: '线电压_Ua',
			value: 0,
			unit: 'KV'
		},
		{
			key: '线电压_Ub',
			title: '线电压_Ub',
			value: 0,
			unit: 'KV'
		},
		{
			key: '线电压_Uc',
			title: '线电压_Uc',
			value: 0,
			unit: 'KV'
		},
		{
			key: '无功功率_Q',
			title: '无功功率_Q',
			value: 0,
			unit: 'Kvar'
		},
		{
			key: '线电压_Uab',
			title: '线电压_Uab',
			value: 0,
			unit: 'KV'
		},
		{
			key: '线电压_Ubc',
			title: '线电压_Ubc',
			value: 0,
			unit: 'KV'
		},
		{
			key: '线电压_Uca',
			title: '线电压_Uca',
			value: 0,
			unit: 'KV'
		},
		{
			key: '频率_F',
			title: '频率_F',
			value: 0,
			unit: 'Hz'
		},
		{
			key: '电流_Ia',
			title: '电流_Ia',
			value: 0,
			unit: 'A'
		},
		{
			key: '电流_Ib',
			title: '电流_Ib',
			value: 0,
			unit: 'A'
		},
		{
			key: '电流_Ic',
			title: '电流_Ic',
			value: 0,
			unit: 'A'
		},
		{
			key: '零序电流_I0',
			title: '零序电流_I0',
			value: 0,
			unit: 'A'
		},
		{
			key: '保护装置_告警总',
			title: '保护装置告警',
			value: ''
		},
		{
			key: '保护装置_事故总',
			title: '保护装置事故',
			value: ''
		},
		{
			key: '正向总有功电度',
			title: '正向总有功电度',
			value: 0,
			unit: 'kw.h'
		},
		{
			key: '一象限总无功电度',
			title: '总无功电度',
			value: 0,
			unit: 'kw.h'
		},
		{
			key: 'M4_接地刀位置遥信',
			title: '接地刀',
			value: ''
		},
		{
			key: 'M4_断路器位置遥信',
			title: '断路器',
			value: ''
		},
		{
			key: 'M4_小车位置遥信',
			title: '小车位置',
			value: ''
		},
		{
			key: 'M4_弹簧未储能遥信',
			title: '弹簧未储能遥信',
			value: ''
		}
	]);

function fn() {
	getApiFabric({
		apiCode: '0e6d4db2-b0e4-4d2a-a6c5-85d5e00b6fe9',
		propertyMapping: {
			text: 'deviceName',
			value: 'deviceKey'
		}
	}).then((res) => {
		list.value = res.data;
		selectVal.value = list.value[0].value;
	});
}

watch(selectVal, () => {
	fn1();
});

function fn1() {
	getApiFabric({
		apiCode: '87dd6d7d-4389-4702-a820-86bdb7815ffb',
		params: [
			{
				code: 'deviceKey',
				value: selectVal.value
			}
		],
		propertyMapping: {
			key: 'name',
			val: 'val'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data);
		list1.value.forEach((item) => {
			item.value = data[item.key];
		});
	});
}
const list2 = ref([
	{
		key: '10KV室内-环境温湿度_当前湿度值',
		title: '10KV室内-湿度',
		value: 0,
		unit: '%'
	},
	{
		key: '10KV室内-环境温湿度_当前温度值',
		title: '10KV室内-温度',
		value: 0,
		unit: '℃'
	},
	{
		key: '综保室内-环境温湿度_当前湿度值',
		title: '综保室内-湿度',
		value: 0,
		unit: '%'
	},
	{
		key: '综保室内-环境温湿度_当前温度值',
		title: '综保室内-温度',
		value: 0,
		unit: '℃'
	},
	{
		key: 'svg室内-环境温湿度_当前湿度值',
		title: 'svg室内-湿度',
		value: 0,
		unit: '%'
	},
	{
		key: 'svg室内-环境温湿度_当前温度值',
		title: 'svg室内-温度',
		value: 0,
		unit: '℃'
	},
	{
		key: 'svg室外-环境温湿度_当前湿度值',
		title: 'svg室外-湿度',
		value: 0,
		unit: '%'
	},
	{
		key: 'svg室外-环境温湿度_当前温度值',
		title: 'svg室外-温度',
		value: 0,
		unit: '℃'
	}
	// , {
	// 	key: '二楼室外-环境温湿度_当前湿度值',
	// 	title: '二楼室外-湿度',
	// 	value: 0,
	// 	unit: '%',
	// }, {
	// 	key: '二楼室外-环境温湿度_当前温度值',
	// 	title: '二楼室外-温度',
	// 	value: 0,
	// 	unit: '℃',
	// }, {
	// 	key: '综保室1-空调控制器_当前湿度值',
	// 	title: '综保室1-湿度',
	// 	value: 0,
	// 	unit: '%',
	// }, {
	// 	key: '综保室1-空调控制器_当前温度值',
	// 	title: '综保室1-温度',
	// 	value: 0,
	// 	unit: '℃',
	// },
]);

function fn2() {
	getApiFabric({
		apiCode: 'd7ec99ac-7e76-4537-900e-1e3d29de5d98',
		propertyMapping: {
			key: 'name',
			val: 'val'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data);
		list2.value.forEach((item) => {
			item.value = data[item.key];
		});
	});
}

let chartData = ref({}),
	opts = {
		color: ['#3CA272', '#1890FF'],
		padding: [10, 0, 0, 0],
		enableScroll: true,
		dataLabel: false,
		legend: {
			position: 'top',
			show: true
		},
		xAxis: {
			itemCount: 5
		},
		yAxis: {
			gridType: 'dash',
			showTitle: true,
			data: [
				{
					min: 0,
					title: 'KW',
					titleOffsetX: -10,
					titleOffsetY: -5
				}
			]
		},
		extra: {
			area: {
				type: 'curve',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};

function fn3() {
	chartData.value = {};
	getByApiCode({
		apiCode: 'gpdyggl',
		propertyMapping: {
			x: 'x',
			y1: 'y1',
			y2: 'y2'
		}
	}).then((res) => {
		const groups = res.data.reduce(
			(groups, person) => {
				groups.categories.push(person.x);
				groups.y1.push(person.y1);
				groups.y2.push(person.y2);
				return groups;
			},
			{
				categories: [],
				y1: [],
				y2: []
			}
		);
		chartData.value = JSON.parse(
			JSON.stringify({
				categories: groups.categories,
				series: [
					{
						name: 'I号母线',
						data: groups.y1
					},
					{
						name: 'II号母线',
						data: groups.y2
					}
				]
			})
		);
	});
}

function getServerData(refresh) {
	Promise.all([fn(), fn2(), fn3()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
		nextTick(() => {
			setTimeout(() => {
				collapse.value.init();
			}, 300);
		});
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style lang="scss" scoped></style>
